<template>
  <div class="sales-bar">
    <div class="sales-bar-inner">
      <vue-echarts :options="options" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    data() {
      this.update()
    }
  },
  methods: {
    update() {
      if (this.data) {
        const _data = this.data.salesBar
        const axis = _data.axis
        const data1 = _data.data1
        const data2 = _data.data2
        this.options = {
          title: {
            text: '今日销售额：253,089.10元',
            textStyle: {
              color: '#fff'
            },
            top: 10
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff'
            },
            data: axis
          },
          series: [
            {
              name: '平台流量',
              type: 'bar',
              data: data1
            },
            {
              name: '外部流量',
              type: 'bar',
              data: data2,
              itemStyle: {
                color: 'rgb(0, 140, 217)'
              }
            }
          ]
        }
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.sales-bar {
  position: absolute;
  top: 300px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 650px;
  padding: 25px 25px 0;
  box-sizing: border-box;

  .sales-bar-inner {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
  }
}
</style>
